import React from "react";
import { RouterView } from "./router";
import HeaderPage from "@/components/Header/index";
import { ConfigProvider, Layout, theme, ThemeConfig } from "antd";
import { useSelector } from "react-redux";
import { Header, Content, Footer } from "antd/es/layout/layout";
import { HappyProvider } from "@ant-design/happy-work-theme";
import styles from "./App.module.scss";
import FooterView from "./components/Footer";
const App: React.FC = () => {
	const locale = useSelector((state: RootState) => state.localeStore.locale);
	const {
		token: { colorBgContainer, borderRadiusLG }
	} = theme.useToken();
	const myTheme: ThemeConfig = {
		token: {
			colorBgContainer: "#fff",
			colorPrimary: "#33bc8e",
			colorLink: "#33bc8e"
		},
		components: {
			Button: {
				// colorPrimary: "#0303d1",
				algorithm: true
			},
			Menu: {
				// darkItemBg: "transparent",
				algorithm: true
			},
			Layout: {
				// colorBgContainer: "#0c0c0f",
				// colorBgHeader: "transparent",
				algorithm: true
			}
		},
		hashed: true,
		cssVar: true
	};
	return (
		<ConfigProvider locale={locale} theme={myTheme}>
			<HappyProvider>
				<Layout className={styles.layout}>
					<Header style={{ display: "flex", alignItems: "center" }}>
						<HeaderPage />
					</Header>
					<Content style={{ padding: "0" }}>
						{/* <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>{`${JSON.stringify(locale)}`}</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb> */}
						<div
							style={{
								background: colorBgContainer,
								minHeight: "calc(100vh - 126px - var(--music-player-height))",
								padding: "24px 0",
								borderRadius: borderRadiusLG
							}}
						>
							<RouterView />
						</div>
					</Content>
					<Footer style={{ textAlign: "center" }}>
						<FooterView />
					</Footer>
				</Layout>
			</HappyProvider>
		</ConfigProvider>
	);
};

export default App;
